import React, { useEffect, useState } from 'react';
import { TreeSelect } from 'antd';
import { formatMessage } from 'umi';
import Ellipsis from '@/zero/components/Ellipsis';
import styles from './index.less';

const TreeNodeElement = TreeSelect.TreeNode;

const renderTreeNodes = (newProps = {}) => {
  const {
    treeNodes = [],
    titleKey = 'title',
    treeNodeKey = 'id',
    childrenKey = 'children',
    ellipsisExtOption = {
      disabled: false,
      length: 25,
    },
    renderTreeNodeTitle = (text) => (
      <Ellipsis tooltip={false} title={text} {...ellipsisExtOption}>
        {text}
      </Ellipsis>
    ),
  } = newProps;
  return treeNodes
    .filter((item) => Object.keys(item).length !== 0)
    .map((item) => {
      const {
        [`${titleKey}`]: titleValue,
        [`${treeNodeKey}`]: newKey,
        [`${childrenKey}`]: childrenValue,
        ...rest
      } = item;
      const newTreeNodeTitle = renderTreeNodeTitle(titleValue);

      const uniqueKey = newKey && `${newKey}`;

      if (childrenValue) {
        return (
          <TreeNodeElement {...rest} key={uniqueKey} value={uniqueKey} title={newTreeNodeTitle}>
            {renderTreeNodes({ ...newProps, treeNodes: childrenValue })}
          </TreeNodeElement>
        );
      }
      return (
        <TreeNodeElement {...rest} key={uniqueKey} value={uniqueKey} title={newTreeNodeTitle} />
      );
    });
};

const Index = (props) => {
  const newProps = {
    multiple: false, // 支持点选多个节点（节点本身）
    placeholder: formatMessage({ id: '请选择' }),
    showSearch: true,
    allowClear: true,

    treeDefaultExpandAll: true,
    treeNodes: [
      {
        id: '0',
        title: '全部分类',
        children: [
          {
            id: '1',
            title: '分类1',
            children: [
              {
                id: '11',
                title: '子分类1-1',
              },
              {
                id: '12',
                title: '子分类1-2',
              },
            ],
          },
          {
            id: '2',
            title: '分类2',
            children: [
              {
                id: '21',
                title: '子分类2-1',
              },
              {
                id: '22',
                title: '子分类2-2',
              },
            ],
          },
        ],
      },
    ],

    filterTreeNode: (inputValue, treeNode) => `${treeNode.props.name}`.indexOf(inputValue) !== -1,

    ...props,
  };

  const { treeDefaultExpandAll, treeNodes, multiple, value } = newProps;

  const newValue = multiple
    ? value?.map((item) => (item ? `${item}` : null))
    : value
    ? `${value}`
    : null;

  const [timestamp, setTimestamp] = useState('19491001');

  useEffect(() => {
    if (treeDefaultExpandAll && treeNodes && treeNodes.length !== 0) {
      setTimestamp(`${Date.now()}`);
    }
  }, [treeNodes]);

  return (
    <span className={styles.col24} key={timestamp}>
      <TreeSelect {...newProps} value={newValue}>
        {renderTreeNodes(newProps)}
      </TreeSelect>
    </span>
  );
};

Index.displayName = 'TreeSelect';
export default Index;
